<template>
  <div>==obj:{{obj.goods}}=====  toRef:{{goods}}
  <div>==obj:{{obj.price}}=====  toRef:{{price}}
 <input  type="button" @click="say()" value="btn"/>
  </div>
</template>

<script>
import {reactive,toRef,toRefs}  from  'vue'
export default {
  setup () {
    const obj=reactive({
      id:1,
      goods:'鞋子',
      price:100
    })
    //  转换单个
    //  const goods=toRef(obj,'goods')
    // const price=toRef(obj,'price')
    // 转换多个
    const newObj=toRefs(obj)


    const say = () => {
      // goods.value='裤子'
      // price.value='200'
      // console.log(goods);
      // console.log(newObj);
      newObj.goods.value='帽子'
      newObj.price.value=500
    }

    // return {say,goods,obj,price}
    return {say,obj,...newObj}
  }
}
</script>

<style lang="scss" scoped>

</style>